<script>
import {dictionaryRequest} from "../../../util/js/globalRequestJs";
import {ifPassApply, searchData} from "./leaseTerminationApplyJs";
import LeaseCheckDetail from "./dialog/LeaseCheckDetail.vue";
import {blurElement, gradeElement} from "../../../util/js/utils";

export default {
  name: "LeaseTerminationApply",
  components: {
    "check-detail-dialog": LeaseCheckDetail
  },
  data() {
    return {
      tableData: [],

      search: {
        searchHouseName: '',
        searchUserName: '',
        searchApplyTime: [],
        searchHandleResult: '2',
        searchHandleTime: [],
        currentPage: 1,
        pageSize: 5,
        totalNumber: 0,
      },
      results: [],
      dialogVisible: false,
      idData: ''
    }
  },
  mounted() {
    this.getDictionaryMeaning();
    this.searchLeaseData();
  },
  methods: {
    handleCurrentChange(newPage) {
      this.search.currentPage = newPage;
      this.searchLeaseData();
    },
    handleSizeChange(newSize) {
      this.search.pageSize = newSize;
      this.searchLeaseData();
    },
    // 获取下拉列表
    getDictionaryMeaning() {
      dictionaryRequest('house_record', 'handle_result').then(res => {
        this.results = res.data;
      }).catch(error => {
        console.log(error);
      })
    },
    // 获取搜索信息
    searchLeaseData() {
      const _this = this;
      const data = _this.search;
      searchData(data).then(res => {
        if (res.code === '200') {
          const oldData = res.data.data;
          const newData = this.getLiveTime(oldData);
          _this.tableData = newData;
          _this.search.totalNumber = res.data.totalNumber;
        } else {
          _this.$message.error(res.msg);
        }
      }).catch(error => {
        _this.$message.error("系统出错了");
        console.log(error);
      })
    },
    // 清空搜索项
    clearSearch() {
      this.search.searchHouseName = '';
      this.search.searchUserName = '';
      this.search.searchApplyTime = [];
      this.search.searchHandleResult = '2';
      this.search.searchHandleTime = [];
      this.search.currentPage = 1;
      this.search.pageSize = 5;
      this.search.totalNumber = 0;
      this.searchLeaseData();
    },
    // 获取房屋时间周期
    getLiveTime(data) {
      let newData = data.map(item => {
        const time = new Date(item.liveTime);
        time.setMonth(time.getMonth() + item.liveCycle);
        return {...item, liveCycleTime: item.liveTime + '至' + time.toISOString().slice(0, 10)};
      });
      return newData;

      /*
        这里出现了一个问题，如果我使用下面这种方式去遍历数据的话，就会导致搜索中
        出现res.dada中没有数据，所以只能通过上面的方式（map）去遍历数据
       */

      // let newData = data;
      // console.log('2:',data)
      // data.forEach((item) => {
      //   const time = new Date(item.liveTime);
      //   time.setMonth(time.getTime() + item.liveCycle);
      //   newData.pop('liveCycleTime', item.liveTime+' - ' + time.toString());
      // })
      // console.log('3:',newData);
      // return newData;
    },
    // 查看申请详细信息
    checkApplyDetail(row) {
      // 设置显隐
      this.dialogVisible = true;
      // 设置id数据
      this.idData = row.hrUuid;
      blurElement('lta-second-container', 1.5)
      gradeElement('lta-dialog-container', 3)
    },
    // 处理申请通过的逻辑
    ltaPassApply(row) {
      ifPassApply(row.hrUuid, '1').then(res => {
        if (res.code === '200') {
          this.searchLeaseData();
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error("系统出错了");
        console.log(err);
      })
    },
    // 处理申请未通过的逻辑
    ltaNoPassApply(row) {
      ifPassApply(row.hrUuid, '0').then(res => {
        if (res.code === '200') {
          this.searchLeaseData();
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error("系统出错了");
        console.log(err);
      })
    },
    // 取消处理结果，显示未处理
    cancelHandle(row) {
      ifPassApply(row.hrUuid, '2').then(res => {
        if (res.code === '200') {
          this.searchLeaseData();
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error("系统出错了");
        console.log(err);
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
      blurElement('lta-second-container', 0)
      gradeElement('lta-dialog-container', 1)
    }
  }
}
</script>

<template>
  <div id="lta-main-container" class="lta-main-container">
    <div id="lta-second-container" class="lta-second-container">
      <div id="lta-search-container" class="lta-search-container">
        <el-descriptions class="margin-top" :column="3" :size="'mini'" border>
          <el-descriptions-item>
            <template slot="label">
              房屋名称
            </template>
            <el-input v-model="search.searchHouseName" style="width:120px" size="mini"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              申请人
            </template>
            <el-input v-model="search.searchUserName" style="width:120px" size="mini"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              处理结果
            </template>
            <el-select v-model="search.searchHandleResult" placeholder="请选择" style="width: 120px" size="mini">
              <el-option v-for="item in results" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item :span="1.5">
            <template slot="label">
              申请时间
            </template>
            <el-date-picker
              :clearable="false"
              v-model="search.searchApplyTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              style="width:250px">
            </el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              处理时间
            </template>
            <el-date-picker
              :clearable="false"
              v-model="search.searchHandleTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              style="width:250px">
            </el-date-picker>
          </el-descriptions-item>
        </el-descriptions>
        <div id="lta-button-container">
          <el-button type="primary" size="small" @click="searchLeaseData">搜索</el-button>
          <el-button type="primary" size="small" @click="clearSearch">清空</el-button>
        </div>

      </div>
      <div id="lta-table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%;height: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            v-if=false
            prop="hruuid">
          </el-table-column>
          <el-table-column
            v-if=false
            prop="huuid">
          </el-table-column>
          <el-table-column
            v-if=false
            prop="uuuid">
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="房屋名称"
            width="100">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="申请人"
            width="80">
          </el-table-column>
          <el-table-column
            prop="liveCycleTime"
            label="租房周期"
            width="120">
          </el-table-column>
          <el-table-column
            prop="monthMoney"
            label="月租"
            width="100">
            <template slot-scope="scope">
              {{ scope.row.monthMoney }}&nbsp;元
            </template>
          </el-table-column>
          <el-table-column
            prop="applyReason"
            label="申请理由"
            width="150">
          </el-table-column>
          <el-table-column
            prop="applyTime"
            label="申请时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="handleResult"
            label="处理结果"
            width="80">
            <template slot-scope="scope">
            <span
              :style="{ color: scope.row.handleResult === '未处理' ?
               'orange' : (scope.row.handleResult === '通过' ? 'green' : 'red') }">
              {{ scope.row.handleResult }}
            </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableData.every(row => row.handleResult !== '未处理')"
            prop="handleTime"
            label="处理时间"
            width="100">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="checkApplyDetail(scope.row)" type="text" size="small">查看详情</el-button>
              <el-button v-if="scope.row.handleResult !== '通过'" @click="ltaPassApply(scope.row)" type="text"
                         size="small">通过
              </el-button>
              <el-button v-if="scope.row.handleResult !== '不通过'" @click="ltaNoPassApply(scope.row)" type="text"
                         size="small">
                不通过
              </el-button>
              <el-button v-if="scope.row.handleResult !== '未处理'" @click="cancelHandle(scope.row)" type="text"
                         size="small">
                取消处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="page" class="page">
        <el-pagination
          :current-page="search.currentPage"
          :page-sizes="[5,10, 15, 20, 50]"
          :page-size="search.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="search.totalNumber"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <div id="lta-dialog-container" class="lta-dialog-container">
      <div v-if="dialogVisible" id="dialog">
        <check-detail-dialog :hrUuid="idData" @closeDialog="closeDialog"></check-detail-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "leaseTerminationApplyCss.css";
</style>
